<template>
	<div class="main">
		<div>
			<img src="@/assets/images/wechat/student/welcome/1.jpg">
		</div>
		<div>
			<div>
				<div>
					<img src="@/assets/images/wechat/student/welcome/2.png">
				</div>
				<div>
					<div>
						<img src="@/assets/images/wechat/student/welcome/5.png">
					</div>
					<div>
						<div>
							<img src="@/assets/images/wechat/student/welcome/3.png">
						</div>
						<div>
							<img src="@/assets/images/wechat/student/welcome/6.png">
						</div>
						<div>
							<img src="@/assets/images/wechat/student/welcome/4.png">
						</div>
					</div>
					<div>
						<div>
							<div>
								<div>
									您现在是
								</div>
								<select :disabled="!studentData.firstLogin" v-model="studentData.type" @change="chooseType">
									<option v-for="(item,index) in typeList" :value="item.value" :key="index">{{item.name}}</option>
								</select>
							</div>
						</div>
						<div>
							<div>
								你为
							</div>
							<div>
								<select :disabled="!studentData.firstLogin" v-model="studentData.schoolId">
									<option v-for="(item,index) in schoolList" :value="item.id" :key="index">{{item.name}}</option>
								</select>
							</div>
							<div>
								战队而站
							</div>
						</div>
						<div>
							<div>
								<div>
									您的学习阶段是
								</div>
								<select :disabled="!studentData.firstLogin"  v-model="studentData.level">
									<option v-for="(item,index) in levelList" :value="item.value" :key="index">{{item.name}}</option>
								</select>
							</div>
						</div>
						<div>
							<input  v-model="studentData.name" placeholder="您的名字"/>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div @click="updateStudent" class="submit">
			保存
		</div>
	</div>
</template>

<script>
	import router from '@/router/index'
	import { selectAllByParentId } from '@/api/datadictionary'
	import { selectAllSchool } from '@/api/school'
	import { findStudentByToken,updateStudentByToken } from '@/api/student'
	
	export default {
		components: {
			
		},
		data() {
			return {
				typeList: [],
				schoolList: [],
				levelList: [],
				studentData:{
					schoolId: "",
					name: "",
					type: "",
					level: "",
					firstLogin: true
				}
			}
		},
		created:async function() {
			this.selectStudent()
		},
		beforeMount: function() {
	
		},
		mounted: function() {
	
		},
		methods: {
			async selectType() {
			  const ajaxData = {}
			  ajaxData.parentId = "66e65d6c8a7c4cdd8d04e946a5429b71"
			  const resultData = await selectAllByParentId(ajaxData)
			  if (resultData.code === 200) {
			    this.typeList = resultData.data
				if(!this.studentData.type){
					this.studentData.type = this.typeList[0].value
				}
				this.selectAllSchool()
				for(const i in this.typeList){
					if(this.typeList[i].value==this.studentData.type){
						this.selectLevel(this.typeList[i].id)
						break
					}
				}
			  }
			},
			async selectAllSchool() {
			  const ajaxData = {}
			  ajaxData.educationLevel = this.studentData.type
			  const resultData = await selectAllSchool(ajaxData)
			  if (resultData.code === 200) {
			    this.schoolList = resultData.data
				if(!this.studentData.schoolId){
					this.studentData.schoolId = this.schoolList[0].id
				}
			  }
			},
			async selectLevel(id) {
			  const ajaxData = {}
			  ajaxData.parentId = id
			  const resultData = await selectAllByParentId(ajaxData)
			  if (resultData.code === 200) {
			    this.levelList = resultData.data
			  }
			},
			async selectStudent() {
			  const ajaxData = {}
			  const resultData = await findStudentByToken(ajaxData)
			  if(resultData.code==200){
				  this.studentData=resultData.data
				  this.selectType()
			  }
			},
			async updateStudent() {
			  const ajaxData = {}
			  if(!this.studentData.schoolId||!this.studentData.name||!this.studentData.type||!this.studentData.level){
				  alert("请完善资料")
				  return
			  }
			  ajaxData.schoolId = this.studentData.schoolId
			  ajaxData.name = this.studentData.name
			  ajaxData.type = this.studentData.type
			  ajaxData.level = this.studentData.level
			  ajaxData.firstLogin = false
			  const resultData = await updateStudentByToken(ajaxData)
			  if(resultData.code==200){
				  this.$dialog.alert({
				    title: '提示',
				    message:'保存成功',
				    confirmButtonText: '确认',
				  }).then(() => {
				  	router.go(-1);
				  })
			  }
			},
			chooseType(){
				this.selectAllSchool()
				for(const i in this.typeList){
					if(this.typeList[i].value==this.studentData.type){
						this.selectLevel(this.typeList[i].id)
						break
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		width: 100%;
		height: 100vh;
		overflow: auto;
		position: relative;
		>div:nth-child(1){
			>img{
				width:100%;
			}
		}
		>div:nth-child(2){
			position: absolute;
			left:19px;
			right:19px;
			top:70px;
			>div:nth-child(1){
				position: relative;
				>div:nth-child(1){
					>img{
						width:100%;
					}
				}
				>div:nth-child(2){
					position: absolute;
					left:13px;
					right:13px;
					top:19px;
					>div:nth-child(1){
						width:234px;
						margin:auto;
						>img{
							width:100%;
						}
					}
					>div:nth-child(2){
						margin-top:24px;
						position: relative;
						>div:nth-child(1){
							width:311px;
							margin:auto;
							>img{
								width:100%;
							}
						}
						>div:nth-child(2){
							position: absolute;
							top:13px;
							left:43px;
							right:56px;
						}
						>div:nth-child(3){
							position: absolute;
							bottom:11px;
							left:51px;
							right:51px;
						}
					}
					>div:nth-child(3){
						margin-left:20px;
						margin-right:20px;
						>div:nth-child(1){
							margin-top:14px;
							width:100%;
							border: 3px solid #772730;
							border-radius: 15px;
							>div:nth-child(1){
								display:flex;
								align-items: center;
								height:46px;
								>div{
									margin-left:17px;
									color:#630813;
									font-weight: 600;
									>img{
										width:100%;
									}
								}
								>select{
									flex:1;
									border:0;
									border-radius: 15px;
									appearance: none;
									outline: none;
									background-color: rgba(0,0,0,0);
									margin-right:23px;
									height:46px;
									line-height: 46px;
									padding-left:10px;
									text-align-last: center;
									font-size:23px;
									color:#630813;
									font-weight: 600;
									overflow: hidden;
									text-overflow: ellipsis;
									 white-space: nowrap;
								}
							}
						}
						>div:nth-child(2){
							margin-top:14px;
							width:100%;
							border: 3px solid #772730;
							border-radius: 15px;
							display:flex;
							align-items: center;
							height:46px;
							>div:nth-child(1){
								margin-left:17px;
								color:#630813;
								font-weight: 600;
								>img{
									width:100%;
								}
							}
							>div:nth-child(2){
								flex:1;
								>select{
									width:100%;
									border:0;
									border-radius: 15px;
									appearance: none;
									outline: none;
									background-color: rgba(0,0,0,0);
									text-align-last: center;
									height:46px;
									line-height: 46px;
									padding-left:10px;
									font-size:23px;
									color:#630813;
									font-weight: 600;
									overflow: hidden;
									text-overflow: ellipsis;
									 white-space: nowrap;
								}
							}
							>div:nth-child(3){
								margin-right:17px;
								color:#630813;
								font-weight: 600;
							}
						}
						>div:nth-child(3){
							margin-top:14px;
							width:100%;
							border: 3px solid #772730;
							border-radius: 15px;
							>div:nth-child(1){
								display:flex;
								align-items: center;
								height:46px;
								>div{
									margin-left:17px;
									color:#630813;
									font-weight: 600;
									>img{
										width:100%;
									}
								}
								>select{
									flex:1;
									border:0;
									border-radius: 15px;
									appearance: none;
									outline: none;
									text-align-last: center;
									height:46px;
									line-height: 46px;
									padding-left:10px;
									font-size:23px;
									background-color: rgba(0,0,0,0);
									color:#630813;
									font-weight: 600;
									overflow: hidden;
									text-overflow: ellipsis;
									 white-space: nowrap;
								}
							}
						}
						>div:nth-child(4){
							margin-top:14px;
							width:100%;
							border: 3px solid #772730;
							border-radius: 15px;
							>input{
								width:100%;
								line-height:46px;
								text-indent: 17px;
								border:0;
								border-radius: 15px;
								outline: none;
								font-size:23px;
								color:#630813;
								font-weight: 600;
							}
						}
					}
				}
			}
		}
		>.submit{
			position: absolute;
			bottom:50px;
			left:0px;
			right:0px;
			width:100px;
			margin:auto;
			line-height: 40px;
			height: 40px;
			border:2px solid #630813;
			border-radius: 10px;
			background-color: #FFFFFF;
			text-align: center;
			font-size:24px;
			font-weight: 600;
			color:#630813;
		}
	}
</style>
